Problems with margins, paddings, divs and floats! PLEASE HELP!

Problems with margins, paddings, divs and floats! PLEASE HELP!

am 09.05.2007 20:30:27 von Agix

HI there,

I am fairly new to web coding, not so new I don't know what tags are
or anything that basic, but new enough to be frustrated by obstacles
that trying to use multiple browsers is causing and not knowing the
way round it.

Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
per s=E9, but more for an explanation of why I see this behaviour - my
experienced friend coder doesn't seem to understand my plight.

I have even include a link to the offending page
http://www.clarifysolutions.co.uk/certenroll/

Now this is just a test page I was making and playing around with CSS.

This is a copy of my CSS:

************************************************************ ***************=
****************

body
{
background-color:#000000;
margin:5px;
padding:0px;
}

#mainpageset
{
width:560px;
background-image:url(abackground.gif);
padding:0px;
margin:0px
height:595px;
}

#navbarmain
{
margin:0px;
padding:0px;
width:375px;
height:30px;
}

..buttonbarmain
{
width:75px;
height:30px;
float:right;
background-image:url(button.rest1.gif);
background-repeat:no-repeat;
text-align:center;
padding:0px;
margin:0px;
font-family:Geneva, Arial, Helvetica, sans-serif;
}

..buttonbarmain:hover
{
background-image:url(button.active1.gif);
}

..linktextbarmain
{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
}

#adbarright
{
float:right;
text-align:center;
color:#000066;
border: solid #00CC66 1px;
width:160px;
padding:0px;
margin:0px;
height:590px;
}

#mainpagecont
{
border:solid 1px #00CC66;
width:400px;
height:560px;
padding:0px;
margin:0px;
overflow:hidden;
}

..adbarimage
{
width:160px;
height:auto;
margin:0px;
padding:0px;
}

**************************** END CSS
**************************************

If you take a look at particularly "#mainpageset" this is a div tag
container for the entire page contents. It has it's width set to
560px.

Notice how I have set EVERY id and class to have margin AND padding =3D
0px. This is so I can work out how the browser is behaving.

Secondly, take note of "#mainpagecont" and "#adbarright" - 400px and
160px respectively in width.

If you take a look at the link in Firefox - it renders ok, but messes
up a fair bit. In IE6+7 it looks plain awful. What I am really annoyed
about is that the two divs, no margins or paddings but they still
overlap!!!!

Correct me if i'm wrong but - 400px + 160 px =3D 560px , no?!?!?! Why
does the browser not follow mathematics?

HELP!

HTML Included to be helpful....

************************************************************ ***************=
******************




ADS!






Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum





************************* END HTML
**********************************************************

Please remember, i was an explanation for this effect as well as a
solution. I know I can fix it easily, but I want to KNOW WHY this is
happening.

Many thanks if you're the one who can come up with the goods.

Gregory

Re: Problems with margins, paddings, divs and floats! PLEASE HELP!

am 09.05.2007 20:47:06 von Ben C

On 2007-05-09, Agix wrote:
> HI there,
>
> I am fairly new to web coding, not so new I don't know what tags are
> or anything that basic, but new enough to be frustrated by obstacles
> that trying to use multiple browsers is causing and not knowing the
> way round it.
>
> Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
> per sé, but more for an explanation of why I see this behaviour - my
> experienced friend coder doesn't seem to understand my plight.
>
> I have even include a link to the offending page
> http://www.clarifysolutions.co.uk/certenroll/
[...]
> If you take a look at particularly "#mainpageset" this is a div tag
> container for the entire page contents. It has it's width set to
> 560px.
>
> Notice how I have set EVERY id and class to have margin AND padding =
> 0px. This is so I can work out how the browser is behaving.
>
> Secondly, take note of "#mainpagecont" and "#adbarright" - 400px and
> 160px respectively in width.
>
> If you take a look at the link in Firefox - it renders ok, but messes
> up a fair bit.

What's wrong with it?

> In IE6+7 it looks plain awful. What I am really annoyed about is that
> the two divs, no margins or paddings but they still overlap!!!!

> Correct me if i'm wrong but - 400px + 160 px = 560px , no?!?!?! Why
> does the browser not follow mathematics?

Firefox is following mathematics OK here.

400px + 160px + 2px + 2px = 564px.

Each 2px is for the left and right borders of mainpagecont and
adbarright.

Re: Problems with margins, paddings, divs and floats! PLEASE HELP!

am 10.05.2007 00:33:59 von dorayme

In article
<1178735427.713467.52590@n59g2000hsh.googlegroups.com>,
Agix wrote:

> HI there,
>
> I am fairly new to web coding, not so new I don't know what tags are
> or anything that basic, but new enough to be frustrated by obstacles
> that trying to use multiple browsers is causing and not knowing the
> way round it.
>
> Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
> per sé, but more for an explanation of why I see this behaviour - my
> experienced friend coder doesn't seem to understand my plight.
>
> I have even include a link to the offending page
> http://www.clarifysolutions.co.uk/certenroll/
>
....
>
> Notice how I have set EVERY id and class to have margin AND padding =
> 0px. This is so I can work out how the browser is behaving.
>

If you want to set all margins to 0 for testing purposes you can
just put * {margin: 0;} at top of your css. Ditto padding.


> If you take a look at the link in Firefox - it renders ok, but messes
> up a fair bit. In IE6+7 it looks plain awful. What I am really annoyed
> about is that the two divs, no margins or paddings but they still
> overlap!!!!
>

As for how floats behave in different browsers, IE6 is known to
add pixels and you will need to study how this browser and othe
IE browsers leave the standards: Not bad to start with may be:



One thing you should do is recheck your code. You leave out a
semicolon where you should not (it is usually important not to do
this):


#mainpageset
{
...
margin:0px
height:595px;
}


And don't use font tags, use the css sheet to control fonts.

And, while I am at it, forget the doc type you are using, use
4.01 Strict, you gain nothing at all from it.

--
dorayme

Re: Problems with margins, paddings, divs and floats! PLEASE HELP!

am 10.05.2007 00:39:23 von Agix

On 9 May, 19:47, Ben C wrote:
> On 2007-05-09, Agix wrote:
>
>
>
> > HI there,
>
> > I am fairly new to web coding, not so new I don't know what tags are
> > or anything that basic, but new enough to be frustrated by obstacles
> > that trying to use multiple browsers is causing and not knowing the
> > way round it.
>
> > Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
> > per s?, but more for an explanation of why I see this behaviour - my
> > experienced friend coder doesn't seem to understand my plight.
>
> > I have even include a link to the offending page
> >http://www.clarifysolutions.co.uk/certenroll/
> [...]
> > If you take a look at particularly "#mainpageset" this is a div tag
> > container for the entire page contents. It has it's width set to
> > 560px.
>
> > Notice how I have set EVERY id and class to have margin AND padding =
> > 0px. This is so I can work out how the browser is behaving.
>
> > Secondly, take note of "#mainpagecont" and "#adbarright" - 400px and
> > 160px respectively in width.
>
> > If you take a look at the link in Firefox - it renders ok, but messes
> > up a fair bit.
>
> What's wrong with it?
>
> > In IE6+7 it looks plain awful. What I am really annoyed about is that
> > the two divs, no margins or paddings but they still overlap!!!!
> > Correct me if i'm wrong but - 400px + 160 px = 560px , no?!?!?! Why
> > does the browser not follow mathematics?
>
> Firefox is following mathematics OK here.
>
> 400px + 160px + 2px + 2px = 564px.
>
> Each 2px is for the left and right borders of mainpagecont and
> adbarright.

Thank you thank you thank you thank you.

I was just being ignorant about the browsers including the borders in
their calculations. Explains the dodgy look in IE as well.

I will bear that in mind for future designs.

Although do the browsers include a border calculation if there is not
one? or do they just sit flush together?

many thanks again

Gregory

Re: Problems with margins, paddings, divs and floats! PLEASE HELP!

am 10.05.2007 09:03:08 von Ben C

On 2007-05-09, Agix wrote:
> On 9 May, 19:47, Ben C wrote:
[...]
>> Firefox is following mathematics OK here.
>>
>> 400px + 160px + 2px + 2px = 564px.
>>
>> Each 2px is for the left and right borders of mainpagecont and
>> adbarright.
[...]
> Although do the browsers include a border calculation if there is not
> one? or do they just sit flush together?

If you're doing a series of left floats for example, with borders, they
will line up flush next to one another. Or should, but I keep hearing
about strange 3px gaps in IE.

Same goes for a series of inline-blocks, inlines or table cells
generally. So yes, you won't generally get that overlapping unless you
start setting widths on everything.

Re: Problems with margins, paddings, divs and floats! PLEASE HELP!

am 10.05.2007 10:36:15 von dorayme

In article ,
Ben C wrote:

> If you're doing a series of left floats for example, with borders, they
> will line up flush next to one another. Or should, but I keep hearing
> about strange 3px gaps in IE

In IE if you float a box left to some static text content, IE6
will add 3px to - let me be nice to Microsoft for a moment - give
some grace to the text, it always looks so ugly if the author
forgets to provide some (and it is easy to muck up this little
bit where floats are concerned if the author does not quite know
what he/she is doing)

--
dorayme

Re: Problems with margins, paddings, divs and floats! PLEASE HELP!

am 10.05.2007 15:26:46 von Bergamot

dorayme wrote:
> In article ,
> Ben C wrote:
>
>> I keep hearing about strange 3px gaps in IE
>
> In IE if you float a box left to some static text content, IE6
> will add 3px to - let me be nice to Microsoft for a moment - give
> some grace to the text

Grace has nothing to do with it. It's a bug.
http://www.positioniseverything.net/explorer/threepxtest.htm l

--
Berg

Re: Problems with margins, paddings, divs and floats! PLEASE HELP!

am 11.05.2007 00:38:40 von dorayme

In article <5agkrnF2oulrmU1@mid.individual.net>,
Bergamot wrote:

> dorayme wrote:
> > In article ,
> > Ben C wrote:
> >
> >> I keep hearing about strange 3px gaps in IE
> >
> > In IE if you float a box left to some static text content, IE6
> > will add 3px to - let me be nice to Microsoft for a moment - give
> > some grace to the text
>
> Grace has nothing to do with it. It's a bug.
> http://www.positioniseverything.net/explorer/threepxtest.htm l

I do not know your grounds for being so sure of this. It is
hardly a demo to point to the annoying consequences of a non
standard rendering browser. If the MS engineers deliberately put
in such a gap (eg, with floated pictures in mind, without
thinking through all the consequences for the html/css authoring
community) it may have had some motivation in providing a bit of
"god-given padding', grace. To show that grace had nothing to do
with it, you might need to provide more than the endless gnashing
of teeth and "workaround" website pages.

My remark was partly based on the principle of charity and partly
on a half forgotten memory of some MS engineer talking in some
forum about this issue.

--
dorayme